<template>
  <template v-for="(layout, i) in layouts" :key="i">
    <div v-if="layout.type" class="flex-center" :style="layout.style" :class="layout.classList" @click.stop="onClick(layout)">
      {{ get1(layout) }}
    </div>
    <component v-else :is="layout.component || 'div'" :style="layout.style" :class="layout.classList" @click.stop="onClick(layout)">
      <ContentView v-if="layout.children && layout.children.length > 0" :layouts="layout.children" />
      <template v-else>{{ layout.content }}</template>
    </component>
  </template>
</template>
<script setup lang="ts">
  import { computed, inject, Ref } from 'vue';
  import { ContentView } from '..';
  import { Layout } from '@/views/types';

  const currentArea = inject<Ref<any>>('currentArea', void 0)

  const props = defineProps<{layouts: any[]}>()
  const layouts = computed(() => {
    if(!props.layouts) return []

    const layouts = props.layouts
    for(const layout of layouts) {
      layout.classList = []
      if(layout.cls) for(const item of layout.cls) layout.classList.push(item)
      if(layout.id === currentArea.value?.id) layout.classList.push('selected')
    }

    return layouts
  })

  function get1(layout: Layout) {
    const { type, component, componentProps } = layout
    if(!type || !component) return ''

    if(!componentProps) return `【${component}】`

    let query = ''
    for(const key in componentProps) {
      query += query ? '&' : '?'
      query += `${key}=${componentProps[key] || ''}`
    }

    return `【${component + query}】`
  }

  function onClick(value) {
    currentArea.value = value
    console.log('---------', currentArea.value)
  }

</script>
<style lang="less" scoped>
  .selected {
    border: 1px solid red;
    max-width: calc(100% - 3px);
    max-height: calc(100% - 3px);
  }
</style>